<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>进制转换</title>
    <style type="text/css">
        #application{
            width: 80%;
            margin: 25px auto;

        }
        input,select{
            width: 200px;
            height: 25px;
            padding-left: 5px;
            margin: 10px;
            box-sizing: border-box;
        }
        .table{
            font-family: "宋体";
            text-align: center;
            line-height: 25px;
        }
        table{
            border-collapse: collapse;

        }
        td{
            width: 200px;
            height: 25px;
            border: solid 1px #FFAAEC;
        }
        .execute{

            text-align: center;
            line-height: 25px;
            border: solid 1px #333333;
            background-color: #000FFF;
            color: #FFFFFF;
        }
    </style>
    <script src="/spider/static/js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="application">

    <input type="text" value="" placeholder="输入需要转换的内容" class="convert"/>

    <select class="select">
        <option value="2">二进制</option>

        <option value="10">十进制</option>

        <option value="16">十六进制</option>

        <option value="string">文本</option>

    </select>

    <input type="button" class="execute" value="执行"/>

    <div class="table">
        <table class="avatar">

        </table>
    </div>
</div>
<script>
    function println(content) {
        console.log(content)
    }

    $('.execute')[0].onclick=function(){
        switch($('.select').val()){
            case '2':
                convert(2)

                break
            case '10':
                convert()

                break
            case '16':
                convert(16)

                break
            case 'string':
                text()
                break
            default:
        }
    }

    function convert(type=10) {
        value=$(".convert")[0].value
        code=parseInt(value,type)
        content = String.fromCharCode(code)+""
        getcode(content)
    }
    
    function text() {
        value=$(".convert")[0].value

        getcode(value)
    }

    list = [{"char":"字符","binary":"二","ten":'十',"hex":"十六"}]
    function getcode(content) {
        content = content.split("")

        for (i = 0; i < content.length; i++) {
            m = content[i].charCodeAt(0)
            obj = {}
            obj.char = content[i]
            obj.binary = m.toString(2)
            obj.ten = m
            obj.hex = m.toString(16).toUpperCase()
            println(JSON.stringify(obj))
            list.push(obj)
        }
        createtable(list)
    }
    avatar=$(".avatar")
    function createtable(list) {

        avatar.innerHTML = ""
        for (i = 0; i < list.length; i++) {
            tr = document.createElement('tr')
            tr.innerHTML = `<tr><td>${list[i].char}</td><td>${list[i].binary}</td><td>${list[i].ten}</td><td>${list[i].hex}</td></tr>`;
            avatar.append(tr)
        }
    }

</script>
</body>
</html>
